import { Component } from 'react';
import { Cross } from '@react-vant/icons';
import './index.less'
import { Input, Button, Toast } from 'react-vant';
import WithRouter from '@/router/WithRouter'
import { userSendCode,userLogin } from '@/Api/login';
import plusReady from '@/utils/plusReady';
import {connect} from 'react-redux'
import {setToken} from '../../redux/action/tokenAction'
class Login extends Component {
    state={
        timer:null,
        title:"发送验证码",
        phone:"",
        code:"",
        authors:null,
        s:59,
        // 登录服务商
        loginService:{

        }
    }
    render() {
        
        return (
            <div className='login_page'>
                <div>
                    <Cross color='#919191' fontSize={20} onClick={()=>{
                         this.props.router.navigate(-1)
                    }}/>
                </div>
                <div className='login'>
                    <div className='title'>
                        短信登录
                    </div>
                    <div className='inp'>
                        <Input
                            placeholder='请输入手机号'
                            value={this.state.phone}
                            clearable
                            onChange={(value)=>{
                                this.setState({
                                    phone:value
                                })
                            }}
                        />
                    </div>
                    <div className='inp code'>
                    <div>
                    <Input
                            placeholder='请输入短信验证码'
                            value={this.state.code}
                            clearable
                            onChange={(value)=>{
                               this.setState({
                                code:value
                               }) 
                            }}
                        />
                    </div>
                    <div className='code_text' onClick={()=>this.sendCode()}>
                        {this.state.title}
                    </div>
                    </div>
                    <div style={{marginTop:"20px",padding:'0 10px'}}>
                        <Button  block color='linear-gradient(to right, rgb(255, 153, 153), rgb(255, 161, 121))' onClick={()=>this.login()}>
                            登录
                        </Button>
                    </div>
                    <div style={{marginTop:"20px",padding:'0 10px'}}>
                        <Button  block color='linear-gradient(to right, rgb(255, 153, 153), rgb(255, 161, 121))' onClick={()=>{
                            let that=this;
                            plusReady(()=>{
                                that.state.loginService["weixin"].login((res)=>{
                                    console.log(JSON.stringify(res))
                                })
                            })
                        }}>
                            微信登录
                        </Button>
                    </div>
                    <div style={{marginTop:"20px",padding:'0 10px'}}>
                        <Button  block color='linear-gradient(to right, rgb(255, 153, 153), rgb(255, 161, 121))' onClick={()=>{
                            let that=this;
                            plusReady(()=>{
                                that.state.loginService["qq"].login((res)=>{
                                    console.log(JSON.stringify(res))
                                })
                            })
                        }}>
                            微信登录
                        </Button>
                    </div>
                </div>
            </div>
        )
    }

    // 发送验证码
    async sendCode(){
        let {phone,s,timer} = this.state;
        let phoneTest = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if(!phone){
            Toast("请输入手机号！")
            return
        } 
        // 判断手机号码格式是否正确
        if(!phoneTest.test(phone)){
            Toast("手机号格式不正确")
            this.setState({
                phone:""
            })
            return;
        }
        if(timer){
            return 
        }
        // 倒计时发送
        this.setState({
            title:s+'秒后再次发送'
        })
        timer=setInterval(()=>{
            s--;
            if(s===0){
                console.log(11111)
                this.setState({
                    title:'再次发送',
                    s:59,
                    timer:null
                })
                //清楚定时器
                clearInterval(timer)
                return
            }
            this.setState({
                s:s,
                title:s+"秒后再次发送"
            })
        },1000)
        this.setState({
            timer
        })

        // 发送验证码；
       let res = await userSendCode({phone:phone});
       if(res.data.code ===200){
        Toast.success(res.data.message)
       }else{
        Toast(res.data.message)
       }
    }

    componentWillUnmount(){
        clearInterval(this.state.timer)
    }
    
    // 用户登录
    async login(){
        let {phone,code} = this.state;
        if(!phone || !code){
            Toast("请您补充完整信息!")
            return
        }
        let res = await userLogin({phone:phone,captcha:code});
        console.log(res)
        if(res.data.code===200){
            Toast.success("登录成功");
            // 将token存储到本地
            localStorage.setItem("USER_TOKEN",res.data.data.token)
            // 更新redux 将token 存储到redux中
            this.props.dispatch(setToken(res.data.data.token))
            this.props.router.navigate(-1)
        }else{
            Toast(res.data.message)
        }
    }
    componentDidMount(){
        console.log(this.props)
        let that = this;
        // 获取登录服务商
        plusReady(()=>{
            plus.navigator.setStatusBarBackground("#fff")
            plus.navigator.setStatusBarStyle("dark");
            plus.oauth.getServices((serveList)=>{
				console.log(JSON.stringify(serveList))
				serveList.forEach(item=>{
					that.state.loginService[item.id] = item
				})
                that.setState({
                    loginService:that.state.loginService
                })
			})
        })
    }
}
export default connect((state)=>{
    return state;
})(WithRouter(Login))